import React, { useEffect, useState, useRef } from 'react';
import PageTitle from '@/components/pageTitle';
import usePagination, { useHeight } from '@/utils/hooks/pagination';
import { Button, Table, Form, Input, DatePicker } from 'antd';
import Icon from '@/components/layout/Icon';
import { getListApi } from '@/request/logs';
import dayjs from 'dayjs';

const layout = {
  labelCol: { flex: '70px' },
  wrapperCol: { flex: '200px' },
};

const Logs = () => {
  const [searchParams, setSearchParams] = useState({});
  const [logsList, setLogsList] = useState<any>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [form] = Form.useForm();
  const { height } = useHeight(290);
  const { pagination, setPagination, onChange } = usePagination({
    pageSize: 10,
  });

  const handleSearch = async (params) => {
    try {
      setLoading(true);
      const ret: any = await getListApi(params);
      if (ret) {
        setLogsList(ret.data);
        setPagination({
          ...pagination,
          total: ret.total,
        });
      }
    } catch (err: any) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (page: any) => {
    const p = pagination.pageSize !== page.pageSize ? 1 : page.current;
    onChange(page);
    handleSearch({
      ...searchParams,
      page: p,
      pageSize: page.pageSize,
    });
  };

  const columns: any = [
    {
      dataIndex: 'type',
      title: '操作类型',
      align: 'center',
      width: 120,
    },
    {
      dataIndex: 'typeText',
      title: '操作内容',
    },
    {
      dataIndex: 'name',
      title: '操作人',
      align: 'center',
      width: 120,
    },
    {
      dataIndex: 'time',
      title: '操作时间',
      align: 'center',
      width: 200,
    },
  ];

  const onSearch = (values) => {
    const obj = { ...values };
    obj.time = obj.time ? dayjs(values.time).format('YYYY-MM-DD') : undefined;
    setPagination({
      ...pagination,
      current: 1,
      pageSize: pagination.pageSize,
    });
    setSearchParams(obj);
  };

  const onReset = () => {
    form.resetFields();
    setSearchParams({});
  };

  useEffect(() => {
    handleSearch({ ...searchParams, page: 1, pageSize: pagination.pageSize });
  }, [searchParams]);

  return (
    <div className="role-manage">
      <PageTitle title="操作日志" />
      <Form form={form} onFinish={onSearch} layout="inline" colon={false} style={{ marginBottom: '10px' }}>
        <Form.Item name="name" label="操作人员" {...layout} style={{ marginBottom: '10px' }}>
          <Input placeholder="请输入操作人" allowClear style={{ marginRight: '5px' }} />
        </Form.Item>
        <Form.Item name="time" label="操作时间" {...layout} style={{ marginRight: '20px', marginBottom: '10px' }}>
          <DatePicker placeholder="请选择" allowClear style={{ width: '200px' }} suffixIcon={<Icon src="/images/date.png" width={16} height={16} />} />
        </Form.Item>
        <Form.Item>
          <Button onClick={onReset} style={{ marginRight: '10px' }}>
            重 置
          </Button>
          <Button
            type="primary"
            style={{ marginRight: '44px' }}
            htmlType="submit"
            icon={<Icon src="/images/search.png" width={16} height={16} style={{ marginRight: '4px', verticalAlign: 'text-top' }} />}
          >
            查 询
          </Button>
        </Form.Item>
      </Form>
      <Table dataSource={logsList} columns={columns} scroll={{ y: height }} rowKey="_id" loading={loading} onChange={handleChange} pagination={pagination}></Table>
    </div>
  );
};

export default Logs;
